<template>
<div id="login">
    <div id="loginForm">
        <p class="title">系统登录</p>
        <el-form
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="loginForm"
            status-icon
            :rules="rules"
            label-width="80"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="loginForm.username" type="username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="checkPass">
                <el-input
                    v-model="loginForm.password"
                    type="password"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()" >登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import { navigateTo } from '@/utils/tools'
import { useRouter } from 'vue-router'
import { cache } from '@/utils/cache'
import { loginApi } from '@/api/login'
import { ElMessage } from 'element-plus'
import md5 from 'md5'

const router = useRouter();

const loginForm = reactive({
  username: 'admin',
  password: '123123'
})

const submitForm = ()=>{
    //把用户输入的用户名密码发送到服务器端进行验证
    loginApi(
        loginForm.username,
        md5(loginForm.password)
    ).then((res)=>{
        if(res.code==200){
            cache.setToken(res.data);
            router.push("/")
        }else{
            ElMessage.error("用户名或者密码错误，登陆失败")
        }
    }).catch((res)=>{
        ElMessage.error("服务器端发生错误，请稍后重试")
    })
}
</script>

<style scoped>
p.title{
    text-align:center;
    font-size:20px;
}
#login{
    width:100vw;
    height:100vh;
    position:fixed;
    left:0px;
    top:0px;
    background:url(../assets/bg.jpg);
    z-index:100;
}
#loginForm{
    background:rgba(255,255,255,0.9);
    width:360px;
    height:250px;
    border-radius:10px;
    margin:200px auto 100px auto;
    padding:20px 50px 0px 30px;
}
</style>